<template>
 <div>
    <div class="search-wrapper">
        <input placeholder="输入城市名或拼音" 
               type="text" 
               class="search-input"
               v-model="cityName"/>
    </div>

    <div class="search-content" ref="search" v-show="cityName">
        <div>
            <div class="resItem border-bottom" v-for="item of resCityList" :key="item.id">
                {{item.name}}
            </div>
        </div>
    </div>
 </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name:"search",
    data:function(){
        return{
            cityName:"",
            resCityList:[]
        }
    },
    props:{
        cities:Object
    },
    
    watch:{
        cityName(){
            const list=[]
            
            if(!this.cityName){
                this.resCityList=[]
                return
            }
            for (let i in this.cities){
               this.cities[i].forEach((value) => {
                   if(value.spell.indexOf(this.cityName)> -1 
                     ||value.name.indexOf(this.cityName)> -1){
                       list.push(value)
                   }
               }); 
            }
            
            this.resCityList=list
            
        }
    },

    mounted(){
        console.log(this.$refs.search)
        this.scroll=new BScroll(this.$refs.search)
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .search-wrapper
        background :$bgColor
        height :0.72rem
        padding :0 .1rem 
        .search-input
            box-sizing :border-box
            width :100%
            height :.62rem
            line-height :.62rem
            border-radius: 0.06rem
            text-align :center
            color:#666
    .search-content
        background :#eee
        position:absolute
        left :0
        right :0
        bottom :0
        top :1.6rem
        z-index :1
        .resItem
            line-height :.62rem
            padding-left :.2rem
            color :#666
            background :#fff
</style>
